<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/free.css">
    <style>
        .el-carousel__indicators .el-carousel__button {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            opacity:1
        }
        .el-carousel__indicators .is-active .el-carousel__button{
            background-color: black;
        }

        .text {
		    line-height: 70rem;
	    }
	
	    .text+ .text {
		    margin-left: 20rem;
	    }
        
        .el-drawer {
            border-radius: 20rem 20rem 0 0 ;
            background-color: #f5f5f5;
        }

        input[type="number"] {
            border: none;       /* 去掉边框 */
            background: none;   /* 去掉背景 */
            padding: 0;         /* 去掉内边距 */
            margin: 0;          /* 去掉外边距 */
            outline: none;      /* 去掉聚焦时的轮廓 */
            appearance: none;   /* 去掉系统默认样式（如搜索框的删除按钮） */
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-row style="padding-bottom: 120rem;">
            <!-- 商品轮播图 -->
            <el-col :xs="24" class="pt-2">
                <el-carousel height="150px" class="mx-2 rounded-lg" arrow="never">
                    <el-carousel-item v-for="(item, index) in swiperPic" :key="item">
                        <el-image class="w-100 h-100" :src="imageApi + item.Picture_URL" fit="cover"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
            <!-- 商品信息 -->
            <el-col :xs="24" class="mt-2">
                <div class="mx-2 bg-white rounded-lg">
                    <div class="flex justify-between align-center py-2 border-bottom">
                        <span class="font font-weight-bold ml-2">商品信息</span>
                    </div>
                    <div class="py-2 mx-2">
                        <div class="flex justify-between">
                            <div class="flex font w-100 text">
                                <span class="flex-shrink font-weight-bold">名称：</span>
                                <span >{{ formData.Article_Name || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">类型：</span>
                                <span>{{ formData.Category_Name || '' }}</span>
                            </div>
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">品牌：</span>
                                <span>{{ formData.Brand_Name || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">单价：</span>
                                <span>{{ formData.Sales_Unit_Price ? formData.Sales_Unit_Price + '￥' : '' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 规格信息 -->
            <el-col :xs="24" class="mt-2">
                <div class="bg-white rounded mx-2">
                    <div class="flex justify-between align-center py-2 border-bottom">
                        <span class="font font-weight-bold ml-2">可选规格</span>
                    </div>
                    <div class="ml-2 flex flex-wrap mt-2">
                        <div :class="index==0?'text-white bg-success':'text-success'" class="font-sm px-2 py-1 mb-2 mr-2 border border-success rounded" 
                            v-for="(item,index) in tableData" :key="index">
                            {{item.Specifications_Name}}
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 详情图片 -->
            <el-col :xs="24" class="mt-2">
                <div class="mx-2 bg-white rounded-lg">
                    <div class="flex justify-between align-center py-2 border-bottom">
                        <span class="font font-weight-bold ml-2">详情图片</span>
                    </div>
                    <div class="py-2 mx-2">
                        <div class="flex" v-for="(item, index) in detailPic" :key="index">
                            <el-image class="w-100" :src="imageApi + item.Picture_URL" fit="contain"></el-image>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 底部 -->
            <el-col :xs="24" class="mt-2">
                <div class="flex align-center bg-white fixed-bottom shadow" style="height: 120rem;">
                    <div class="flex mx-2 text-muted flex-shrink">
                        <div @click="goHome" class="flex flex-column align-center mr-2">
                            <i class="font el-icon-s-home"></i>
                            <span class="font-small">首页</span>
                        </div>
                        <div class="flex flex-column align-center">
                            <i class="font el-icon-s-goods"></i>
                            <span class="font-small">购物车</span>
                        </div>
                    </div>
                    <div @click="drawer = true" class="w-100 flex mr-2 text-white rounded-circle overflow-hidden" style="height: 80rem;">
                        <div class="bg-danger w-100 flex justify-center align-center">
                            <span class="font font-weight-bold">加入购物车</span>
                        </div>
                        <div class="bg-success w-100 flex justify-center align-center">
                            <span class="font font-weight-bold">立刻购买</span>
                        </div>
                    </div>
                </div>
                <!-- 弹窗 -->
                <el-drawer class="rounded-top-lg" :visible.sync="drawer" direction="btt" size="75%">
                    <!-- 点击关闭 -->
                    <i @click="drawer = false" class="el-icon-close position-absolute " style="right: 20rem; top: 20rem;"></i>
                    <!-- 商品图片 -->
                    <div class="mx-2 pt-2 flex align-end">
                        <div class="flex align-center rounded-lg overflow-hidden" style="width: 200rem; height: 200rem;">
                            <el-image class="w-100" :src="imageApi + formData.Picture_URL" mode="scaleToFill">
                                <div slot="error" class="bg-white flex justify-center align-center" style="width: 200rem;height: 200rem;">
                                    <i class=" el-icon-picture text-muted" style="font-size: 120rem;"></i>
                                </div>
                            </el-image>
                        </div>
                        <span class="font-lg ml-2">￥{{formData.Sales_Unit_Price || '0'}}</span>
                    </div>
                    <!-- 选择地址 -->
                    <div @click="toAddress" class="mx-2 mt-2 px-2 py-2 bg-white rounded flex align-center">
                        <div class="flex align-center w-100 mr-2">
                            <i class="font-lg el-icon-location text-success flex-shrink mr-2"></i>
                            <div v-if="addressData" class="flex flex-column w-100">
                                <span class="font font-weight-bold">{{addressData.Province}}{{addressData.City}}{{addressData.County}}{{addressData.Detailed_Address}}</span>
                                <span class="mt-2 font-sm text-muted">{{addressData.Name}} {{addressData.Phone}}</span>
                            </div>
                            <span v-else class="font font-weight-bold pr-2">请选择收货地址</span>
                        </div>
                        <i class="flex-shrink el-icon-arrow-right font"></i>
                    </div>
                    <!-- 选择规格 -->
                    <div class="pt-2 bg-white rounded mx-2 mt-2">
                        <span class="font font-weight-bold ml-2">可选规格</span>
                        <div class="ml-2 flex flex-wrap mt-2">
                            <div :class="index==0?'text-white bg-success':'text-success'" class="font-sm px-2 py-1 mb-2 mr-2 border border-success rounded" 
                                v-for="(item,index) in tableData" :key="index">
                                {{item.Specifications_Name}}
                            </div>
                        </div>
                    </div>
                    <!-- 下单数量 -->
                    <div class="flex justify-between align-center py-2 bg-white rounded mx-2 mt-2">
                        <span class="font font-weight-bold ml-2">数量</span>
                        <div class="flex mr-2">
                            <div @click="changeCount('sub')" class="bg-light text-center flex justify-center align-center" style="width: 50rem;height: 50rem;">
                                <i class="el-icon-minus font-small"></i>
                            </div>
                            <div class="flex bg-light justify-center align-center font border-left border-right" style="width: 50rem;height: 50rem;">
                                <input v-model="Quantity" type="number" class="w-100 text-center" />
                            </div>
                            <div @click="changeCount('add')" class="bg-light text-center flex justify-center align-center" style="width: 50rem;height: 50rem;">
                                <i class="el-icon-plus font-small"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 提交 -->
                    <div class="flex align-center bg-white w-100 position-absolute shadow" style="bottom: 0; height: 120rem;">
                        <div class="w-100 flex mx-2 text-white rounded-circle overflow-hidden" style="height: 80rem;">
                            <div @click="submitCart" class="bg-danger w-100 flex justify-center align-center">
                                <span class="font font-weight-bold">加入购物车</span>
                            </div>
                            <div @click="submitOrder" class="bg-success w-100 flex justify-center align-center">
                                <span class="font font-weight-bold">提交订单</span>
                            </div>
                        </div>
                    </div>
                </el-drawer>
            </el-col>
        </el-row>
        
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/jweixin.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/goods-detail.js"></script>
</body>

</html>